import React, { useEffect, useState } from "react";
import axios from "axios";
import { NavBar, Swiper, Tabs, Grid, List } from "react-vant";
import { ShopO } from "@react-vant/icons";
import { useNavigate } from "react-router-dom";
import ListItem from "../../components/ListItem";
interface MenuRawState {
  id: string;
  title: string;
  image: string;
}

export interface ListRawState {
  id: string;
  image: string[];
  title: string;
  desc: string;
  price: number;
  messageList: MessageRowState[];
}

interface MessageRowState {
  id: string;
  nickname: string;
  content: string;
  avator: string;
  createDateTime: string;
}

const Index: React.FC = () => {
  const [banners, setBanners] = useState<string[]>([]);
  const [menus, setMenus] = useState<MenuRawState[]>([]);
  const [lists, setLists] = useState<ListRawState[]>([]);
  const [finished, setFinished] = useState(false);
  const [_page, set_page] = useState(1);
  const navigate = useNavigate();

  const fetchData = async () => {
    const [banners, menus] = await Promise.all([
      axios.get("/api/banners"),
      axios.get("/api/menus"),
    ]);

    setBanners(banners.data.data);
    setMenus(menus.data.data);
  };

  const fetchList = async () => {
    const resp = await axios.get("/api/list", { params: { _page } });
    const { data, message, code } = resp.data;
    if (code === 200) {
      setLists([...lists, ...resp.data.data]);
      set_page(_page + 1);
    } else {
      setFinished(true);
    }
  };

  const goToDetail = (v: ListRawState) => {
    navigate(`/detail/` + v.id, {
      state: v,
    });
  };

  useEffect(() => {
    fetchData();
    fetchList();
  }, []);

  if (banners.length === 0 || menus.length === 0 || lists.length === 0) {
    return <div>数据加载中...</div>;
  }

  return (
    <div className="home">
      {/* 头部导航 */}
      <NavBar title="首页" leftArrow={false} />
      {/* tab切换 */}
      <Tabs>
        <Tabs.TabPane title="数码">
          {/* 轮播组件 */}
          <Swiper>
            {banners.map((v, i) => {
              return (
                <Swiper.Item key={i}>
                  <img src={v} alt="" className="banner-img" />
                </Swiper.Item>
              );
            })}
          </Swiper>
          {/* 导航菜单 */}
          <Grid columnNum={5}>
            {menus.map((v) => {
              return (
                <Grid.Item
                  icon={
                    <img
                      src={v.image}
                      style={{ borderRadius: "50%" }}
                      width={30}
                    ></img>
                  }
                  key={v.id}
                  text={v.title}
                ></Grid.Item>
              );
            })}
          </Grid>
          {/* 列表组件 */}
          <List
            finished={finished}
            onLoad={fetchList}
            finishedText="没有更多数据了"
            loadingText="数据拼命加载中..."
          >
            <div className="list">
              {lists.map((v, i) => {
                return (
                  <ListItem
                    key={i}
                    v={v}
                    onClick={() => goToDetail(v)}
                    desc={<div>{v.desc}</div>}
                  ></ListItem>
                );
              })}
            </div>
          </List>
        </Tabs.TabPane>
        <Tabs.TabPane title="衣服">衣服</Tabs.TabPane>
        <Tabs.TabPane title="鞋子">鞋子</Tabs.TabPane>
        <Tabs.TabPane title="电视">电视</Tabs.TabPane>
        <Tabs.TabPane title="水果">水果</Tabs.TabPane>
        <Tabs.TabPane title="化妆品">化妆品</Tabs.TabPane>
      </Tabs>
    </div>
  );
};

export default Index;
